<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{ fontSize: '16px' }">
    Loading...
  </afl-loading>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100" v-else>
    <div class="container">
      <div class="top-container">
        <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu header-title">
          <el-menu-item index="1">
            <el-icon>
              <platform/>
            </el-icon>
            {{ $t('wms.finishLineSummary') }}
          </el-menu-item>
        </el-menu>
        <div class="card-list" style="padding-top: 4px">
          <div class="card-list-left">
            <video id="logo-video" style="width: 250px;height: 100%;" :poster="data.videoUrl" autoplay muted loop
                   playsinline type="video/mp4"
                   :src="data.videoUrl"></video>
          </div>
          <div class="card-list-right">
            <div class="card-list-info">
              <finishing-line :classes="data.classes" :period="data.period"></finishing-line>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-container">
        <div class="bottom-header">
          <div class="select-line">
            <!-- <tab-line></tab-line> -->
            <process-line @handle="menuClick" :process-id="'PE'" :title="data.lineTitle" filter="JJGPDLine"
                          :frequency="remoteData.refreshFrequency"
                          :currentLine="remoteData.currentProductionLine"></process-line>
          </div>
          <div class="bottom-list">
            <div class="line-number">
              <!-- <div class="date-departure">
                <div class="classes">
                  <p class="classes-title">班次别</p>
                  <el-select v-model="data.classes" class="m-2 classes-select" placeholder="请选择" @change="change">
                    <el-option v-for="item in data.options" :key="item.value" :label="item.label" :value="item.value"/>
                  </el-select>
                </div>
                <div class="classes">
                  <p class="classes-title">日期别</p>
                  <el-date-picker v-model="data.period" type="daterange" range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期" format="YYYY-MM-DD"/>
                </div>
              </div> -->
              <div class="line-classify">
                <finishing-card-show :classes="data.classes" :period="data.period"
                                     :lineCode="lineCode"></finishing-card-show>
              </div>
            </div>
            <!-- 实时数据 -->
            <div class="real-time">
              <div class="real-time-JKJ">
                <real-time-table :rankList="data.rankList" :showList="false"></real-time-table>
              </div>
              <div class="real-time-PE real-time-JKJ">
                <real-time-table :rankList="data.rankListPE" :showList="false"></real-time-table>
              </div>
              <div class="real-time-DR">
                <real-time-table :rankList="data.rankListDR" :showList="data.showList"></real-time-table>
              </div>
            </div>
          </div>
        </div>
        <!-- 历史数据 -->
        <div class="bottom-history">
          <history-table :lineCode="lineCode" @getChildren="oncFun"></history-table>
        </div>
      </div>
    </div>
  </ScaleBox>
</template>

<script setup>
// 引入组件，进去页面显示加载
import AflLoading from '@/components/loading'
import finishingLine from '@/components/wms/finishing/finishingLine'
import processLine from '@/components/mes/common/processLine'
import tabLine from '@/components/wms/finishing/tabLine'
import finishingCardShow from '@/components/wms/finishing/finishingCardShow'
import realTimeTable from '@/components/wms/finishing/realTimeTable'
import historyTable from '@/components/wms/finishing/historyTable'
import iconFont from '@/components/IconFont/iconFont'
import { onMounted, reactive, ref, watch } from 'vue'
import ScaleBox from 'vue3-scale-box'
import config from '@/config/index'
import {
  getJKJProcessRealtimeData,
  getDRProcessRealtimeData,
  getPEProcessRealtimeData,
  getJJGSingleTabulateData, getShiftTime, sameDayProductionLineCode, dicItemByCode
} from '@/api/mesApi'
import useI18n from '@/hooks/language'
import 'animate.css'

const { t } = useI18n()

const data = reactive({
  ready: false,
  showList: true,
  lineTitle: t('wms.lineSelect'),
  classes: '', // 班次
  period: [], // 周期
  rankList: {
    title: t('wms.JKJProcessReal'),
    data: {}
  },
  rankListPE: {
    title: t('wms.peProcessReal'),
    data: {}
  },
  rankListDR: {
    title: t('wms.drProcessReal'),
    data: {}
  },
  videoUrl: config.ossUrl + '/afl-data-screen/images/job.mp4',
  shiftCode: '',
  timeLsit: ''
})
const remoteData = ref({
  refreshFrequency: [], // 刷新频率
  currentProductionLine: [] // 当前生产工序产线
})

onMounted(() => {
  data.ready = true
  processRealtimeData()
  processRealtimeData2()
  processRealtimeData3()
  shiftTime()
  setTime()
  productionLineCode()
})

// 历史数据接收子组件传递的值
const oncFun = (x, y) => {
  console.log('父组件函数,接收到子组件的值为:', x, y)
  data.period = x
  data.classes = y
  data.timeLsit = x
  data.shiftCode = y
  console.log(typeof data.timeLsit)
  watch(() => [data.classes, data.period], () => {
    processRealtimeData()
    processRealtimeData2()
    processRealtimeData3()
  })
}

// 下拉选择改变值
const change = (val) => {
  // console.log(val)
  data.classes = val
}

/* 菜单点击切换的时候触发 */
const lineCode = ref('JJGPDLine1')
const menuClick = (processRow) => {
  lineCode.value = processRow?.productionLineCode
  processRealtimeData()
  processRealtimeData2()
  processRealtimeData3()
}

const productionLineCode = () => {
  // /* 5.查询工序当天正在生产的产线 */
  // sameDayProductionLineCode({ processCode: 'JJG' }).then(function (res) {
  //   remoteData.value.currentProductionLine = res
  // })
  /* 6.数据字典获取JC条线自动刷新的频率 */
  dicItemByCode({ code: 'JJGVIEW' }).then(function (res) {
    remoteData.value.refreshFrequency = res.data
  })
}

// 实时数据获取
const processRealtimeData = () => {
  getJKJProcessRealtimeData({ productionLineCode: lineCode.value }).then(res => {
    data.rankList.data = res.data
  })
}
const processRealtimeData2 = () => {
  getDRProcessRealtimeData({ productionLineCode: lineCode.value }).then(res => {
    data.rankListDR.data = res.data
  })
}
const processRealtimeData3 = () => {
  getPEProcessRealtimeData({ productionLineCode: lineCode.value }).then(res => {
    data.rankListPE.data = res.data
  })
}
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await processRealtimeData()
    await processRealtimeData2()
    await processRealtimeData3()
    // await shiftTime()
  }, 6000)
}

const shiftTime = () => {
  getShiftTime({code:'ShiftTime'}).then(res => {
    data.shiftCode = res.data
    // data.timeLsit = res.dateStr
  })
}
</script>

<style scoped lang="scss">
@forward "index";

body,
#app,
#dv-full-screen-container {
  background-color: #c0cfe5
}

* {
  margin: 0;
  padding: 0;
}
</style>
